<template>
  <div class="p2">
    <div class="fon-size-3.5 font-600 pb-2">选择任务结果数据</div>
    <div class="border-1 border-solid border-#e4e4e4 p2">
      <el-form ref="queryFormRef" v-model="queryParams" inline size="small">
        <el-form-item prop="taskName" label="任务名称">
          <el-input v-model="queryParams.taskName" placeholder="请输入" style="width: 180px" />
        </el-form-item>
        <el-form-item label="载荷分类" prop="loadType">
          <el-select v-model="queryParams.loadType" clearable style="width: 180px">
            <el-option v-for="(item, index) in pageLoadTypes" :key="'name' + index" :label="item.label" :value="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="阶段" prop="stage">
          <el-select v-model="queryParams.stage" clearable style="width: 180px">
            <el-option v-for="(item, index) in pageStages" :key="'stage' + index" :label="item.label" :value="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="版本号" prop="version">
          <el-input v-model="queryParams.version" placeholder="请输入" style="width: 180px" />
        </el-form-item>
        <el-form-item label="创建日期">
          <el-date-picker
            v-model="dateRangeCreateTime"
            style="width: 240px"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="tableDatas" height="250">
        <el-table-column width="50" type="selection" align="center"></el-table-column>
        <el-table-column label="序号" width="50" type="index" align="center">
          <template #default="scope">
            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实验名称" align="center" prop="stage"></el-table-column>
        <el-table-column label="载荷分类" align="center" prop="loadType"></el-table-column>
        <el-table-column label="实验阶段" align="center" prop="stage"></el-table-column>
        <el-table-column label="版本号" align="center" prop="version" />
        <el-table-column label="运行状态" align="center" prop="state" width="200"></el-table-column>
        <el-table-column label="创建人" align="center" prop="createBy" />
        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="fon-size-3.5 font-600 pt-2 pb-2">数据统计</div>
    <div class="border-1 border-solid border-#e4e4e4 p2">
      <div class="p2 flex flex-justify-between">
        <div><el-button type="primary" size="small">数据统计</el-button></div>
        <div><el-button type="primary" size="small">生成报告</el-button></div>
      </div>
      <el-row :gutter="10">
        <el-col :span="12">
          <div ref="leftGraphRef" class="w-100% h-100"></div>
        </el-col>
        <el-col :span="12">
          <div ref="rightGraphRef" class="w-100% h-100"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup name="ExperimentResultStatistic" lang="ts">
import * as echarts from 'echarts';
import { loadNames, stages } from '@/api/loadProcessingAlgorithm/index';
import { getExperimentList } from '@/api/loadProcessingAlgorithm/loadTaskManagement/index';
const queryFormRef = ref<ElFormInstance>();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const pageLoadTypes = ref([]);
const pageStages = ref(stages);
const loading = ref(false);
const tableDatas = ref([]);
const leftGraphRef = ref(null);
const rightGraphRef = ref(null);
const dateRangeCreateTime = ref<[DateModelType, DateModelType]>(['', '']);
const queryParams = reactive({
  taskName: '',
  loadType: '',
  stage: '',
  state: '已完成',
  version: '',
  pageNum: 1,
  pageSize: 5
});
const getPageLoadTypes = () => {
  loadNames.forEach((item) => {
    pageLoadTypes.value = [...pageLoadTypes.value, ...item.children];
  });
};
/** 查询模型列表 */
const getList = async () => {
  loading.value = true;
  loading.value = true;
  const response = await getExperimentList(proxy?.addDateRange(queryParams, dateRangeCreateTime.value, 'CreateTime'));
  tableDatas.value = response.rows;
  loading.value = false;
  loading.value = false;
};
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  queryFormRef.value?.resetFields();
  handleQuery();
}
const drawGraph = (myChart, datas) => {
  const seriesDatas = [];
  datas.seriesDatas.forEach((item) => {
    const obj = {
      name: item.name,
      data: item.seriesDatas,
      type: 'line',
      showSymbol: false,
      lineStyle: {
        width: 2,
        // color: item.color,
        type: item.type // 'solid'实线 'dashed'虚线
      }
    };
    seriesDatas.push(obj);
  });
  const option = {
    title: {
      text: datas.title,
      left: 'center'
    },
    color: ['#00f', '#00f', '#f00', '#f00', '#000', '#000'],
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        let tip = '';
        if (params && params.length) {
          tip = params[0].name;
          params.forEach((item) => {
            const flag = item.seriesName.includes('上');
            tip += `<div>
                      <div style="display:inline-block;color:${item.color}">${flag ? '——   ' : '-----  '}</div>
                      <span>${item.seriesName}</span>
                      <span style="font-weight:700">   ${item.value}</span>
                    </div>`;
          });
        }
        return tip;
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      show: true,
      type: 'category',
      boundaryGap: false,
      data: datas.xAxisDatas
    },
    yAxis: {
      type: 'value'
    },
    series: seriesDatas
  };
  option && myChart.setOption(option);
};
const drawLeftGraph = () => {
  const myChart = echarts.init(leftGraphRef.value);
  const datas = {
    title: '最新统计',
    xAxisDatas: ['0', '5', '10', '15', '20', '25', '30'],
    seriesDatas: [
      {
        name: '飞行载荷MX1上包线-old',
        seriesDatas: [-820, -932, 901, -934, -1290, 1330, 1320],
        color: '#0f0',
        type: 'solid'
      },
      {
        name: '飞行载荷MX1下包线old',
        seriesDatas: [-720, -832, -801, -834, 1190, 1230, 1220],
        color: '#0f0',
        type: 'dashed'
      },
      {
        name: '飞行载荷MX1上包线',
        seriesDatas: [820, 932, 901, 934, 1290, 1330, 1320],
        color: 'red',
        type: 'solid'
      },
      {
        name: '飞行载荷MX1下包线',
        seriesDatas: [720, 832, -801, 834, -1190, 1230, 1220],
        color: 'red',
        type: 'dashed'
      }
    ]
  };
  drawGraph(myChart, datas);
};
const drawRightGraph = () => {
  const myChart = echarts.init(rightGraphRef.value);
  const datas = {
    title: '历史统计',
    xAxisDatas: ['0', '5', '10', '15', '20', '25', '30'],
    seriesDatas: [
      {
        name: '飞行载荷MX1上包线',
        seriesDatas: [820, 932, 901, 934, 1290, 1330, 1320],
        color: 'blue',
        type: 'solid'
      },
      {
        name: '飞行载荷MX1下包线',
        seriesDatas: [720, 832, -801, 834, -1190, -1230, 1220],
        color: 'blue',
        type: 'dashed'
      }
    ]
  };
  drawGraph(myChart, datas);
};
onMounted(() => {
  getList();
  getPageLoadTypes();
  drawLeftGraph();
  drawRightGraph();
});
</script>

<style lang="scss" scoped></style>
